<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <style>
        a {
            color: #000;
            width: 42px;
            height: 25px;
            background-color: #efefef;
            padding: 3px;
            text-decoration: none;
        }
        #capture {
            position: relative;
            float: left;
        }
        #box {
            position: absolute;
            top: 726px;
            left: 310px;
        }
        #content {
            z-index: 99;
            color: #c5b081;
            border-bottom: 1px solid #c5b081;
            min-width: 20px;
            font-size: 34px;
            font-weight: 500;
            text-align: center;
        }
        #sex {
            min-width: 20px;
            font-size: 34px;
            text-align: center;
            z-index: 99;
            font-weight: 500;
            color: #c5b081;
        }
        .button {
            background-color: #f1f1f1;
            padding: 8px 18px;
            display: inline-block;
            border: none;
            color: #0082ee;
            width: 80px;
            text-align: center;
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <br>
    <a href="javascript:;" download=""  class="button" id="create">生成</a>
    <!-- <input type="button" value="下载" id="download"> -->
    <a href="javascript:;" download=""  class="button" id="download">下载</a>
    <hr>
    <div id="capture">
        <div id="box">
            <span id="content" contenteditable="true">你的姓名</span>
            <span id="sex" contenteditable="true">女士:</span>
        </div>
        <img src="1.jpg" id="img">
    </div>
    <hr>
    <br>

    <div id="view">

    </div>
</body>
<script type="text/javascript">

    var create = document.getElementById('create')
    var download = document.getElementById('download')
    var view = document.getElementById('view')


    create.onclick = function(){

        /* */
        html2canvas(document.querySelector("#capture"),{
            allowTaint:true,
        }).then(canvas => {
                view.innerHTML = ''
                view.appendChild(canvas)

                var canvas = document.getElementsByTagName('canvas')[0]
                console.log(canvas)

                canvas.crossOrigin='*';
                // canvas.crossOrigin = 'http://profile.ak.fbcdn.net/crossdomain.xml';

                var base64Img = canvas.toDataURL('image/jpeg');
                console.log(base64Img);
                download.href = base64Img

        });

       
    }

</script>
</html>